<template>
    <div class="person-layout">
        <div class="person-info">
            <div class="top">
                <div class="user-portrait"><img :src="userInfo.photo" alt=""></div>
                <div class="info">
                    <p class="username">{{userInfo.realName}}</p>
                    <!--<p class="email">185***1896@QQ.com</p>-->
                </div>
            </div>
            <ul class="bottom">
                <li class="list-item">
                    <div class="number">
                        <img src="../../assets/image/day.png" alt="">
                        <span class="font-large48" style="color: #15C2F3;">30</span>
                        <span class="font-large" style="opacity: 0.5">天</span>
                    </div>
                    <div class="text font-large">使用云笔记</div>
                </li>
                <li class="list-item">
                    <div class="number">
                        <img src="../../assets/image/node.png" alt="">
                        <span class="font-large48" style="color: #FD619B;">30</span>
                        <span class="font-large" style="opacity: 0.5">篇</span>
                    </div>
                    <div class="text font-large">笔记数</div>
                </li>
                <li class="list-item">
                    <div class="number">
                        <img src="../../assets/image/share-num.png" alt="">
                        <span class="font-large48" style="color: #15CF41;">30</span>
                        <span class="font-large" style="opacity: 0.5">篇</span>
                    </div>
                    <div class="text font-large">分享数</div>
                </li>
            </ul>
        </div>
        <ul class="option-list">
            <li class="option-item" @click="onLinkTo(1)">
                <div class="left">
                    <img src="../../assets/image/recovery.png" alt="" class="icon-30" style="margin-right: 10px;"><span class="font-large26">回收站</span>
                </div>
                <img src="../../assets/image/arrow-right.png" alt="" class="arrow-right">
            </li>
            <li class="option-item">
                <div class="left">
                    <img src="../../assets/image/feed.png" alt="" class="icon-30" style="margin-right: 10px;"><span class="font-large26">反馈与建议</span>
                </div>
                <img src="../../assets/image/arrow-right.png" alt="" class="arrow-right">
            </li>
            <li class="option-item" @click="onLinkTo(3)">
                <div class="left">
                    <img src="../../assets/image/about.png" alt="" class="icon-30" style="margin-right: 10px;"><span class="font-large26">关于</span>
                </div>
                <img src="../../assets/image/arrow-right.png" alt="" class="arrow-right">
            </li>
            <li class="option-item" @click="onLinkTo(4)">
                <div class="left">
                    <img src="../../assets/image/set.png" alt="" class="icon-30" style="margin-right: 10px;"><span class="font-large26">账号设置</span>
                </div>
                <img src="../../assets/image/arrow-right.png" alt="" class="arrow-right">
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Person',
        data() {
            return {
                userInfo: JSON.parse(localStorage.getItem('userInfo'))
            }
        },
      methods: {
            onLinkTo(type) {
                switch (type) {
                    case 1:
                        this.$router.push({ name: 'recycle'});
                        break;
                    case 3:
                        this.$router.push({name: 'about'});
                        break;
                    case 4:
                        this.$router.push({ name: 'setInfo'});
                        break;
                }
            },
        }
    }
</script>

<style scoped>
    .person-layout {
        background: #F5F8FB;
        min-height: 93vh;
    }
    .person-info {
        height: 531px;
        background-image: url("../../assets/image/info-bg.png");
        background-size: 100%;
        background-repeat: no-repeat;
        padding: 30px 20px 0;
    }
    .top {
        padding-left: 30px;
        padding-top: 80px;
        display: flex;
        align-items: center;
    }
    .user-portrait {
        width: 153px;
        height: 153px;
        border-radius: 50%;
        background: white;
    }
    .user-portrait img {
      width: 100%;
      height: 100%;
      display: inline-block;
      border-radius: 50%;
    }
    .info {
        padding-left: 56px;
        color: #fff;
    }
    .info .username {
        font-size: 36px;
    }
    .info .email {
        font-size: 18px;
        padding-top: 37px;
    }
    .bottom {
        /*width: 710px;*/
        height: 200px;
        background: #F3FFFE;
        box-shadow: 0 5px 10px 0 rgba(53, 191, 233, 0.09);
        border-radius: 30px;
        margin-top: 47px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .list-item {
        width: 33%;
        border-right: 1px solid rgba(0,0,0,0.1);
    }
    .list-item:last-child{
        border: none;
    }
    .list-item .number {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .number img {
        width: 42px;
        height: 42px;
        margin-right: 7px;
    }
    .list-item .text {
        opacity: 0.8;
        text-align: center;
        margin-top: 35px;
    }
    .option-list {
        width: 710px;
        height: 481px;
        background: #FFFFFF;
        box-shadow: 0 5px 10px 0 rgba(53, 191, 233, 0.09);
        border-radius: 30px;
        margin: -30px auto 0;
        padding: 0 60px;
        box-sizing: border-box;
    }
    .option-item {
        height: 25%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .option-item:last-child{
        border: none;
    }
    .left {
        display: flex;
        align-items: center;
    }
    .arrow-right {
         width: 13px;
         height: 21px;
     }
</style>